<template>
    <button
            :class="['tech-button', { loading }]"
            :disabled="loading"
    >
    <span v-if="!loading">
      <slot></slot>
    </span>
        <div v-else class="loading-spinner">
            <div class="spinner-dot"></div>
            <div class="spinner-dot"></div>
            <div class="spinner-dot"></div>
        </div>
        <div class="button-border"></div>
    </button>
</template>

<script>
    export default {
        name: 'TechButton',
        props: {
            loading: {
                type: Boolean,
                default: false
            }
        }
    }
</script>

<style scoped>
    .tech-button {
        position: relative;
        width: 100%;
        padding: 1rem;
        background: transparent;
        color: #64ffda;
        border: none;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        cursor: pointer;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .tech-button:hover {
        color: #e6f1ff;
    }

    .tech-button:hover .button-border::before {
        transform: translateX(0);
    }

    .button-border {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    .button-border::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 1px solid #64ffda;
        transform: translateX(-100%);
        transition: transform 0.5s ease;
    }

    .button-border::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 1px solid #64ffda;
        transform: translateX(100%);
        transition: transform 0.5s ease;
    }

    .tech-button:hover .button-border::after {
        transform: translateX(0);
    }

    .loading-spinner {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }

    .spinner-dot {
        width: 8px;
        height: 8px;
        background: #64ffda;
        border-radius: 50%;
        animation: bounce 1.4s infinite ease-in-out both;
    }

    .spinner-dot:nth-child(1) {
        animation-delay: -0.32s;
    }

    .spinner-dot:nth-child(2) {
        animation-delay: -0.16s;
    }

    @keyframes bounce {
        0%, 80%, 100% {
            transform: scale(0);
        } 40% {
              transform: scale(1);
          }
    }
</style>